<template>
  <h4>MBTI人格测试</h4>

  <div class="login-register">

    <div class="contain">

      <div class="big-box" :class="{active:isLogin}">

        <div class="big-contain" key="bigContainLogin" v-if="isLogin">
          <div class="btitle">学生信息填写</div>
          <div class="bform">
            <el-form>
                <el-form-item label="姓名">
                   <el-input placeholder="请输入您的学生姓名" v-model="loginData.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="学号">
                <el-input placeholder="请输入您的学生学号" v-model="loginData.sno" clearable></el-input>
                </el-form-item>
                <el-form-item label="班级">
                  <el-input placeholder="请输入您的班级" v-model="loginData.class" clearable></el-input>
                </el-form-item>
                <el-form-item label="专业">
                  <el-input placeholder="请输入您的专业" v-model="loginData.major" clearable></el-input>
                </el-form-item>
                <el-form-item label="学院">
                   <el-input placeholder="请输入您的学院" v-model="loginData.dept" clearable></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="login" class="confirm-button" type="primary" text-align="center"><span>开始您的MBTI测试</span></el-button>
                </el-form-item>
              </el-form>
          </div>

        </div>

        <div class="big-contain" key="bigContainRegister" v-else>
          <div class="btitle">管理员登录</div>
          <div class="bform">
            <el-form>
            <el-form-item label="工号">
              <el-input placeholder="请输入您的工号" v-model="loginData.id" clearable></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input placeholder="请输入您的姓名" v-model="loginData.guanli_name" clearable></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
              <el-input placeholder="请输入您的登陆密码" v-model="loginData.password" show-password clearable></el-input>
            </el-form-item>
            </el-form>
          </div>
          <el-form>
            <el-form-item>
              <el-button @click="register" class="confirm-button" type="primary" text-align="center"><span>管理员登录</span></el-button>
            </el-form-item>
          </el-form>
        </div>

      </div>
      <div class="small-box" :class="{active:isLogin}">
        <div class="small-contain" key="smallContainRegister" v-if="isLogin">
          <div class="stitle">管理员小姐姐！<br>点击这里登录!</div>
          <p class="scontent">可视化界面查看</p>
          <button class="sbutton" @click="changeType">管理员登录</button>
        </div>
        <div class="small-contain" key="smallContainLogin" v-else>
          <div class="stitle">童鞋！<br>点击这里开始测试!</div>
          <p class="scontent">看看你是哪种人格？</p>
          <button class="sbutton" @click="changeType">开启学生测试</button>
        </div>
      </div>

    </div>

  </div>
</template>


<script>
import axios from "axios"
import{reactive} from 'vue'
import { ElMessage } from 'element-plus'
import {login} from '../http/api'
import router from '../router/index.js'

export default{
  name:'login-register',
  data(){
    return {
      isLogin:false,
      existed: false,
      emailError: false,
      passwordError: false,
      loginData:{
        name:'',
        sno:'',
        class:'',
        major:'',
        dept:'',
        id:'',
        guanli_name:'',
        password:''
      }
    }
  },
  methods:{
    changeType() {
      this.isLogin = !this.isLogin
      this.loginData.id = ''
      this.loginData.guanli_name = ''
      this.loginData.password = ''
    },
    login() {
      const self = this;
      //先判断账号信息是否已经填写

      if(!self.loginData.sno||!self.loginData.name||!self.loginData.class||!self.loginData.major||!self.loginData.dept){
        ElMessage.error('请先填写完成您的相关信息哦~亲~');
        return
      }

//执行学生登录操作
      let config = {
        headers: {
          'Content-Type': "application/json, charset=UTF-8"
        }
      };
      let data = {
        Sname: self.loginData.name,
        Sno: self.loginData.sno,
        Sclass: self.loginData.class,
        Sdept: self.loginData.dept,
        Smajor: self.loginData.major
      };

      axios.post('http://localhost:8080/MBTI-backend/upsertStudent', data, config).then(res => {
        console.log(JSON.stringify(res))
        localStorage.setItem("sno", self.loginData.sno)
        router.push('/quiz')
      })
          .catch(error => {
            // obj.error ? obj.error(error) : null;
            alert(JSON.stringify(error))
          });
    },
    register(){
      const self = this;
      //先判断账号信息是否已经填写

      if(!self.loginData.id||!self.loginData.guanli_name||!self.loginData.password){
        ElMessage.error('请先填写完成您的相关信息哦~亲~');
        return
      }

      if(self.loginData.id!='2020082328'){
        ElMessage.error('工号错误！请重试！工号都记不住？哈？');
        return
      }

      if(self.loginData.guanli_name!=('荀鹏峻')){
        ElMessage.error('姓名错误！请重试！不是吧，名都记不住啦？');
        return
      }

      if(self.loginData.password!=('11111')){
        ElMessage.error('密码错误！请重试！喂！小妞！认真点啊！');
        return
      }

//执行登录操作

      login(self.loginData).then(res=>{
        console.log(res)
        router.push('/visualization')
      })
    }
  }
}
</script>


<style scoped="scoped">
.login-register{
  width: 90vw;
  height: 85vh;
  box-sizing: border-box;
}
.contain{
  width: 80%;
  height: 80%;
  position: relative;
  top: 48%;
  left: 55%;
  transform: translate(-50%,-50%);
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 0 3px #f0f0f0,
  0 0 6px #f0f0f0;
}
.big-box{
  width: 70%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(0%);
  transition: all 1s;
}
.big-contain{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btitle{
  width: 40%;
  height: 18%;
  margin-left: 150px;
  font-size: 2em;
  font-weight: bold;
  color: rgba(196, 66, 66, 0.7);
}
.bform{
  width: 100%;
  height: 60%;
  padding: 2em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.bform .errTips{
  display: block;
  width: 50%;
  text-align: left;
  color: red;
  font-size: 0.7em;
  margin-left: 1em;
}
.bform input{
  width: 50%;
  height: 30px;
  border: none;
  outline: none;
  border-radius: 10px;
  padding-left: 2em;
  background-color: #f0f0f0;
}
.confirm-button{
  width: 120%;
  height: 50px;
  margin-left: 0px;
  border-radius: 24px;
  border: none;
  outline: none;
  background-color: rgba(196, 66, 66, 0.7);
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
}

.small-box{
  width: 30%;
  height: 100%;
  background: linear-gradient(135deg, rgba(196, 66, 66, 0.7), rgba(236, 176, 117, 0.7));
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0%);
  transition: all 1s;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.small-contain{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.stitle{
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
}
.scontent{
  font-size: 0.8em;
  color: #fff;
  text-align: center;
  padding: 2em 4em;
  line-height: 1.7em;
}
.sbutton{
  width: 60%;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #fff;
  outline: none;
  background-color: transparent;
  color: #fff;
  font-size: 0.9em;
  cursor: pointer;
}

.big-box.active{
  left: 0;
  transition: all 0.5s;
}
.small-box.active{
  left: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transform: translateX(-100%);
  transition: all 1s;
}

.student_massge{
  margin:30px 90px 30px 20px;
}


h4{
  /*文字大小*/
  font-size:70px;
  /*文本居中*/
  text-align:center;
  /*字体颜色*/
  margin-top: 15px;
  color: rgb(255, 255, 255, 1);

}


</style>
